<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>门票处理</el-breadcrumb-item>
      <el-breadcrumb-item>门票销售</el-breadcrumb-item>
    </el-breadcrumb>

    <h4>各城市所有景区销售总额</h4>
    <el-table :data="orderDetList" border style="width: 100%">
      <el-table-column prop="oid" label="序号"> </el-table-column>
      <el-table-column prop="city" label="城市"> </el-table-column>
      <el-table-column prop="types" label="票价类型"></el-table-column>
      <el-table-column prop="discount" label="折扣"></el-table-column>
      <el-table-column prop="sale_total" label="销售总额"></el-table-column>
      <el-table-column prop="times" label="时间"></el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageindex" :page-sizes="[10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Sales',
  data() {
    return {
      orderDetList: [],
      queryInfo: {
        pageindex: 1,
        pagesize: 10,
      },
      total: 0,
    }
  },
  created() {
    this.getOrderDetList()
  },
  methods: {
    async getOrderDetList() {
      const { data: res } = await this.$http.get('/my/sales', {
        params: {
          pageindex: this.queryInfo.pageindex,
          pagesize: this.queryInfo.pagesize,
        },
      })
      if (res.status !== 0) return this.$message.error(res.message)
      this.orderDetList = res.list
      this.total = res.total
    },
    // 分页区的当前页数据显示的条数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderDetList()
    },
    // 当前页面值
    handleCurrentChange(newPage) {
      this.queryInfo.pageindex = newPage
      this.getOrderDetList()
    },
  },
}
</script>

<style></style>
